<template>
  <el-dialog v-model="dialogVisible" width="80%" title="选择商品" append-to-body>
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <!-- <el-form-item label="商品名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入商品名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item> -->
        <el-form-item label="商品类型" prop="name">
          <el-select v-model="queryParams.productType" placeholder="请选择商品类型" class="w100%!">
            <el-option
              v-for="item in productsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商家" prop="name">
          <el-select v-model="queryParams.merchantId" placeholder="请选择所属商家" class="w100%!">
            <el-option
              v-for="item in merchantList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
        ref="multipleTableRef"
        :data="list"
        style="width: 100%"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="商品名称" align="center" />
        <el-table-column prop="productTypeName" label="商品类型" align="center" />
        <el-table-column prop="merchantName" label="所属商家" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column prop="supplyPrice" label="供货价/总" align="center" />
        <el-table-column prop="platformPrice" label="平台售价/人" align="center" />
        <el-table-column prop="productIntroduct" label="商品介绍" align="center">
          <template #default="scoped">
            <el-popover
              :width="300"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                <span class="color-blue">查看</span>
              </template>
              <template #default>
                {{ scoped.row.productIntroduct }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
        small
      />
    </ContentWrap>
    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElTable } from 'element-plus'
import * as ProductsListApi from '@/api/blind/productsList'
import * as MerchantListApi from '@/api/blind/merchantList'

const { t } = useI18n() // 国际化
const emit = defineEmits(['childEvent'])

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  productType: undefined,
  merchantId: undefined
})
const queryFormRef = ref() // 搜索的表单
const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// 数据列表
const goodsList = ref([])

// 商品类型列表
const productsList = ref()
// 商家列表
const merchantList = ref()

/** 打开弹窗 */
const open = async (type: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)

  const data = await ProductsListApi.getProductsListPage(queryParams)
  goodsList.value = data.list
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 多选
const currentRow = ref()
const handleSelectionChange = (val) => {
  currentRow.value = val
}

// 提交
const submitForm = async () => {
  const goodsList = currentRow.value.map((item) => {
    return {
      productId: item?.id,
      productName: item?.name,
      merchantId: item?.merchantId,
      merchantName: item?.merchantName,
      address: item?.address,
      supplyPrice: item?.supplyPrice,
      platformPrice: item?.platformPrice,
      productIntroduct: item?.productIntroduct,
      status: 1
    }
  })

  emit('childEvent', goodsList)
  dialogVisible.value = false
  multipleTableRef.value!.clearSelection()
}

// 取消
const cancel = () => {
  dialogVisible.value = false
  multipleTableRef.value!.clearSelection()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ProductsListApi.getProductsListPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  queryParams.productType = undefined
  queryParams.merchantId = undefined
  handleQuery()
}

onMounted(async () => {
  const data1 = await ProductsListApi.getProductsListListAll()
  const data2 = await MerchantListApi.getMerchantListAll()
  productsList.value = data1
  merchantList.value = data2

  getList()
})
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
